<div i="UserNode:wrap" style="display: none;">
    <div class="row">
        <div class="col-sm-12 col-md-8 alert alert-primary">
            <form i="UserNode:form" action="<!--{iCMS:route url='UserNode'}-->" method="post">
                <input type="hidden" name="action" value="create" />
                <input type="hidden" name="id" value="" />
                <div class="form-group">
                    <label for="name">名称</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入分类名称......" value="" />
                </div>
                <div class="form-group">
                    <label for="description">简介</label>
                    <input type="text" class="form-control" id="description" name="description" placeholder="请输入分类简介......" value="" />
                </div>
                <div class="form-group">
                    <label for="description">权限</label>
                    <select name="mode" id="mode" class="form-control">
                        <option value="0">私有</option>
                        <option value="1">公开</option>
                    </select>
                </div>
                <div class="form-group text-center">
                    <button type="submit" class="btn btn-primary">
                        <i class="fa fa-plus"></i>
                        <span>添加</span>
                    </button>
                </div>
                <div class="form-text text-muted">
                    最多可建立
                    <!--{$iCMS.CONFIG.user.node.max}-->
                    个分类
                </div>
            </form>
        </div>
    </div>
</div>

<div class="row mb-2">
    <button i="UserNode:toggle" type="button" class="btn btn-sm btn-success">
        <i class="fa fa-plus"></i>
        添加分类
    </button>
</div>
<table class="table table-vcenter">
    <thead>
        <tr>
            <th class="text-center" style="width: 50px">#</th>
            <th>名称</th>
            <th class="d-none d-sm-table-cell">统计</th>
            <th class="text-center" style="width: 100px">权限</th>
            <th class="text-center" style="width: 100px">操作</th>
        </tr>
    </thead>
    <tbody>
        <!--{iCMS:user:node loop="true" row="10"  userid="$ME.uid" appid="1"}-->
        <tr id="id<!--{$user_node.id}-->">
            <th class="text-center" scope="row"><!--{$user_node.id}--></th>
            <td class="font-w600 font-size-sm">
                <a href="<!--{$user_node.url}-->"><!--{$user_node.name}--></a>
                <small class="form-text text-muted">
                    <!--{$user_node.description}-->
                </small>
            </td>
            <td class="d-none d-sm-table-cell">
                <!--{$user_node.count}-->
            </td>
            <td class="text-center">
                <!--{$user_node.mode?"公开":"私有"}-->
            </td>
            <td class="text-center">
                <div class="btn-group btn-group-sm">
                    <a i="UserNode:edit" data-id="<!--{$user_node.id}-->" href="javascript:;" class="btn btn-light"><i class="fa fa-fw fa-pencil-alt"></i></a>
                    <a i="UserNode:delete" data-id="<!--{$user_node.id}-->" href="javascript:;" class="btn btn-light"><i class="fa fa-fw fa-trash-alt"></i></a>
                </div>
            </td>
        </tr>
        <!--{/iCMS}-->
    </tbody>
</table>
<script>
    jQuery(() => {
        var $wrap = iCMS.$i("UserNode:wrap");
        var $create = iCMS.$i("UserNode:form");
        $create.on("submit", function (e) {
            e.preventDefault();
            var api = $(this).attr("action");
            var data = $(this).jsonArray();
            iCMS.request
                .post(api, data)
                .then(function (json) {
                    if (json.code) {
                        iCMS.notify.success("添加成功！");
                        window.location.reload();
                    } else {
                        iCMS.notify.error(json.message || "添加错误！", 3000);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            return false;
        });
        iCMS.$i("UserNode:edit").on("click", function (e) {
            e.preventDefault();
            var api = iCMS.api("UserNode");
            var data = {
                action: "data",
                id: $(this).data("id"),
            };
            iCMS.request
                .post(api, data)
                .then(function (json) {
                    if (json.code) {
                        $wrap.show();
                        $('[type="submit"] span').text("编辑");
                        $.each(json.data, function (idx, value) {
                            $("[name=" + idx + "]").val(value);
                        });
                    } else {
                        iCMS.notify.error(json.message, 3000);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            return false;
        });
        iCMS.$i("UserNode:delete").on("click", function (e) {
            e.preventDefault();
            var api = iCMS.api("UserNode");
            var data = {
                action: "delete",
                id: $(this).data("id"),
            };
            iCMS.request
                .post(api, data)
                .then(function (json) {
                    if (json.code) {
                        iCMS.notify.success(json.message);
                        $("#id" + data["id"]).remove();
                        // window.location.reload();
                    } else {
                        iCMS.notify.error(json.message, 3000);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
            return false;
        });
        iCMS.$i("UserNode:toggle").on("click", function (e) {
            e.preventDefault();
            $wrap.toggle();
            $create[0].reset();
            $('[type="submit"] span').text("添加");
        });
    });
</script>
